<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/css1.css" />
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        body{
            border-collapse: collapse;
            border-spacing: 0;
        }
        a{
            display: inline;
        }
        .order-pro{
            width: 990px;
            margin: 0 auto;
            border: 1px solid #e8e8e8;
        }
        .order-pro .order-title{
            height: 38px;
            line-height: 40px;
            font-size: 16px;
            margin: 0;
            padding: 0 24px;
            background-color: #f5f5f5;
            border-bottom: 1px solid #e8e8e8;
        }
        .order-pro .order-title>p{
            float: left;
        }
        .order-pro .order-title>span{
            display: block;
            float: right;
            color: #d70024;
            font-size: 14px;
        }
        .order-pro .order-tips{
            height: 40px;
            font-size: 14px;
            line-height: 40px;
            text-align: center;
            background-color: #fefbd5;
        }
        .order-message .goods-table{
            width: 100%;
            font-size: 13px;
            color: #444;
        }
        .order-message .goods-table th{
            line-height: 40px;
        }
        .order-message .goods-table th:nth-child(2){
            text-align: left;
        }
        .goods-table .border-top{
            border-top: 1px solid #e8e8e8;
        }
        .goods-table .name{
            display: inline-block;
            vertical-align: top;
            font-size: 16px;
            font-weight: 300;
            margin-left: 8px;
        }
        .goods-table td{
            padding: 28px 0;
            text-align: center;
        }
        .goods-table td:nth-child(2){
            text-align: left;
        }
        .goods-table tbody td a{
            display: inline-block;
        }
        .order-message .order-message-title>p{
            float: left;
        }
        .order-pro .order-message ul li{
            height: 90px;
            line-height: 90px;
            margin-top: 8px;
            border: 1px solid #e8e8e8;
            padding: 28px 24px;
        }
        .order-pro .order-message .order-message-content>*{
            float: left;
        }
        .balance-wrapper>*{
            border-top: 1px solid #e8e8e8;
            padding: 24px 20px;
            text-align: right;
        }
        .balance-wrapper ul li{
            margin-top: 8px;
        }

        .balance-wrapper p{
            clear: right;
        }

        /*头*/
        .simple-header{
            height: 66px;
            margin: 0 0 20px;
            border-bottom: 2px solid #222;
        }
        .simple-header .header-inner{
            width: 990px;
            height: 100%;
            margin: 0 auto;
        }
        .simple-header .header-inner .logo{
            float: left;
        }
        .simple-header .header-inner .logo a img{
            padding: 4px;
        }
        .simple-header .header-inner .header-tool{
            float: right;
            line-height: 66px;
        }
        .simple-header .header-inner .header-tool li{
            float: left;
            margin-right: 20px;
            font-size: 12px;
        }
        .order-pro .balance-wrapper{
            font-size: 14px;
            color: #444;
        }
        .balance-wrapper p>span{
            display: block;
            margin-top: 8px;
        }
        .sum-wrap{
            width: 990px;
            margin: 0 auto;
            text-align: right;
            line-height: 1.5;
            padding: 30px 0 10px;
            font-size: 24px;
        }
        .sum-wrap .price{
            font-size: 30px;
            color: #d90025;
        }
        .sum-wrap>button {
            width: 150px;
            line-height: 50px;
            color: #fff;
            font-size: 20px;
            font-weight: 700;
            background: #d90025;
            border: none;
            outline: none;
            padding: 0;
            margin-left: 10px;
            vertical-align: super;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="simple-header">
        <div class="header-inner">
            <h2 class="logo">
                <a href="">
                    <img src="images/logo_deepblue.png" alt="" height="58" />
                </a>
            </h2>
            <ul class="header-tool">
                <li>
                    <span>Hi</span>
                    <a href="user-center.html">扑街仔</a>
                    <a href="#">[退出]</a>
                </li>
                <li>
                    <span>
                        <a href="#">MY有货</a>
                    </span>
                </li>
                <li>
                    <a href="#">订单中心</a>
                </li>
                <li>
                    <span>
                        <a href="#">客户服务</a>
                    </span>
                </li>
            </ul>
        </div>
    </div>
    <div class="order-pro">
        <div class="order-title">
            <p>订单商品信息</p>
            <span class="turn-to-cart">返回购物车修改</span>
        </div>
        <div class="order-tips">
            <span>温馨提示：您购买的商品分属不同仓库，部分商品需要品牌商调货</span>
        </div>
        <div class="order-message">
            <table class="goods-table">
                <thead>
                    <tr>
                        <th width="3%"></th>
                        <th width="46%">商品信息</th>
                        <th>门店</th>
                        <th width="18%">单价</th>
                        <th width="6%">数量</th>
                        <th width="3%"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td></td>
                        <td class="border-top">
                            <a href=""><img src="images/order/2.jpg" alt=""></a>
                            <p class="name">HIPANDA男黑色印花短袖T恤</p>
                        </td>
                        <td class="border-top">
                            <p class="store-name">成都天府广场乐鲜Go门店</p>
                        </td>
                        <td class="border-top">
                            <p>￥199.00</p>
                        </td>

                        <td class="border-top">*1</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td class="border-top">
                            <a href=""><img src="images/order/2.jpg" alt=""></a>
                            <p class="name">HIPANDA男黑色印花短袖T恤</p>
                        </td>
                        <td class="border-top">
                            <p class="store-name">成都天府广场乐鲜Go门店</p>
                        </td>
                        <td class="border-top">
                            <p>￥199.00</p>
                        </td>

                        <td class="border-top">*1</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td class="border-top">
                            <a href=""><img src="images/order/2.jpg" alt=""></a>
                            <p class="name">HIPANDA男黑色印花短袖T恤</p>
                        </td>
                        <td class="border-top">
                            <p class="store-name">成都天府广场乐鲜Go门店</p>
                        </td>
                        <td class="border-top">
                            <p>￥199.00</p>
                        </td>

                        <td class="border-top">*1</td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="balance-wrapper">
            <ul>
                <li class="promotion-item">
                    <span><strong></strong>件商品</span>
                    <span>商品总价：</span>
                    <span><strong class="red">+￥597.00</strong></span>
                </li>
                <li class="promotion-item">
                    <span>总运费：</span>
                    <span><strong class="red">+￥00.00</strong></span>
                </li>
            </ul>
            <p>
                <span>收货地址：四川省 成都市 双流县四川省成都市双流县文星镇川大路二段二号四****安校区</span>
                <span>联系电话：187****7763 </span>
            </p>
        </div>
    </div>
    <div class="sum-wrap">
        应付金额：
        <span id="order-price" class="price" data-price="5964">¥ 5964.00</span>
        <button id="order-submit">提交订单</button>
    </div>
</body>
</html>